<template>

	<view style="background-color: #f9f9f9;">
		
		
		
		
		<!-- 待审核标题 -->
		<view class="prefer-title">待审核</view>
		<block v-for="(item, index) in visitorApplyArr" :key="index">
		
			<view class="prefer-content">
				
				<image src="../../static/visitors/待审核.png" class="audi"></image>
				
				<view class="content pos">
					<image src="../../static/visitors/地点.png" class="pic"></image>
					<text class="info">访问地址：</text>
					<text class="con">滁州金鹏集团总部大楼</text>
				</view>
				
				<view class="content pos">
					<image src="../../static/visitors/手机.png" class="pic"></image>
					<text class="info">联系电话：</text>
					<text class="con">{{ item.visitorphone }}</text>
					<image src="../../static/visitors/电话.png" class="pic po" @click="call()"></image>
				</view>
				
				<view class="content pos out">
					<view>
						<image src="../../static/visitors/人数.png" class="pic"></image>
						<text class="info">到访人数:</text>
						<text class="con">{{ item.visitorsquantity }}</text>
					</view>
					
					<!-- <view class="del">
						<text class="info">访问车辆:</text>
						<text class="con">111</text>
					</view> -->
				</view>
				
				<view class="content sp">
					<view class="detail">
						<view class="app">
							<image src="../../static/visitors/绿圆圈.png" class="quan"></image>
							<text>申请时间</text>
						</view>
						
						<text class="time">{{item.visitorstarttime}}</text>
					</view>
					
					<view>
						<image class='img' src="../../static/visitors/虚线--.png"></image>
					</view>
					
					<view class="detail">
						<view class="app">
							<image src="../../static/visitors/红圆圈.png" class="quan"></image>
							<text>失效时间</text>
						</view>
						
						<text class="time">{{item.visitorendtime}}</text>
					</view>
					
				</view>
			</view>
		</block>
		<view class="none" v-if="visitorApplyArr.length == 0"><text>暂无数据</text></view>
		
		
		<!-- 历史访问标题 -->
		<view class="prefer-title">历史访问</view>
		<block v-for="(item, index) in visitorApplyHistoryArr" :key="index">
		
			<view class="prefer-content">
				
				<image src="../../static/visitors/已审核.png" class="audi"></image>
				
				<view class="content pos">
					<image src="../../static/visitors/地点.png" class="pic"></image>
					<text class="info">访问地址：</text>
					<text class="con">滁州金鹏集团总部大楼</text>
				</view>
				
				<view class="content pos">
					<image src="../../static/visitors/手机.png" class="pic"></image>
					<text class="info">联系电话：</text>
					<text class="con">{{ item.visitorphone }}</text>
					<image src="../../static/visitors/电话.png" class="pic po" @click="call()"></image>
				</view>
				
				<view class="content pos out">
					<view>
						<image src="../../static/visitors/人数.png" class="pic"></image>
						<text class="info">到访人数:</text>
						<text class="con">{{ item.visitorsquantity }}</text>
					</view>
				</view>
				
				<view class="content sp">
					<view class="detail">
						<view class="app">
							<image src="../../static/visitors/绿圆圈.png" class="quan"></image>
							<text>申请时间</text>
						</view>
						
						<text class="time">{{item.visitorstarttime}}</text>
					</view>
					
					<view>
						<image class='img' src="../../static/visitors/虚线--.png"></image>
					</view>
					
					<view class="detail">
						<view class="app">
							<image src="../../static/visitors/红圆圈.png" class="quan"></image>
							<text>失效时间</text>
						</view>
						
						<text class="time">{{item.visitorendtime}}</text>
					</view>
					
					
					
				</view>
				
			</view>
		</block>
		<view class="none" v-if="visitorApplyHistoryArr.length == 0"><text>暂无数据</text></view>
		
	</view>
</template>

<script>
	// 解构console
	var { log } = console;
	
	import { visitorApplyListUrl } from '../../api/request.js';
	import { openidSubmitUrl } from '../../api/request.js';
	import { publicing } from '../../api/api.js';
	import { phone } from '../../api/request.js';
	
	// 引入即可反馈组件
	import HMmessages from '../../components/HM-messages/HM-messages.vue';
	
	// 引入公用存储用户登录
	import { login } from '../../api/list.js';
	var db = wx.cloud.database();
	var users = db.collection('user');

	export default {
		components: { HMmessages },
		
		data() {
			return {
				// 记录总列表
				visitorApplyAllArr:[],
				// 待审核记录列表
				visitorApplyArr:[],
				// 已审核（历史访问）记录列表
				visitorApplyHistoryArr:[],
				show: false,
				
				// 根据访问人手机号，获取访问记录 调用地址
				visitorApplyListUrl:'',
				// 根据访问人手机号，获取访问记录 入参
				param:'',
				// 手机号
				phone:'',
				// 登录授权手机号
				initPhone:'',
				
				submitData:'',
				
				
			}
		},

		onLoad(e) {
			// log("*******e********:"+e)
			if(e != null || e != ''){
				let paramData = JSON.parse(e.paramData);
				
				this.visitorApplyListUrl = visitorApplyListUrl,
				this.param = {
					visitorPhone : paramData.visitorPhone,
					pageIndex : 1
				} 
				
				publicing(this.visitorApplyListUrl, this.param)
					.then(res => {
						log(res)
						if (JSON.parse(JSON.parse(JSON.stringify(res.data)).data).StatusCode == 200) {
							this.visitorApplyAllArr = JSON.parse(JSON.parse(JSON.stringify(res.data)).data).Data;
							log("this.visitorApplyAllArr:"+this.visitorApplyAllArr)
							var index = this.visitorApplyAllArr.findIndex(item => {
								// auditstatus 0:待审核 1:已审核
								if (item.auditstatus == 0) {
									this.visitorApplyArr.push(item);
									log("待审核记录列表:"+JSON.stringify(this.visitorApplyArr))
								} else {
									this.visitorApplyHistoryArr.push(item);
									log("已审核（历史访问）记录列表:"+JSON.stringify(this.visitorApplyHistoryArr))
								}
							});
							
							
						}
					})
			}
			
		},

		methods: {
			// 按钮：电话咨询
			call() {
				log(phone)
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			
			confirm() {
				log("进行授权")
				this.submitData = {
					phone: this.initPhone, 
					openId: this.openid
				}
				log("传入值为："+ JSON.stringify(this.submitData))
				this.openidSubmitUrl = openidSubmitUrl
				
				publicing(this.openidSubmitUrl, this.submitData)
					.then(res => {
						log("提交openid返回结果:"+res)
						if(res.statusCode == 200){
							
							log("111111登录成功")
							// 登陆成功
							this.$nextTick(() => {
								log("登录成功")
								//dom更新循环结束之后的延迟回调
								this.HMmessages.show('授权成功', { icon: 'success', iconColor: '#ffffff', fontColor: '#ffffff', background: 'rgba(240, 142, 35, 0.8)' });
							});
						}
					})
				
			},
			
			// 发起登录取到用户信息
			getUserInfo(event) {
				console.log(event);
				// Step1 存储用户信息到user数据库
				let user = event.detail.userInfo;
				login(user)
					.then(res => {
						console.log("res的数据为:"+JSON.stringify(res));
						
						// Step2 获取用户openid
						users.get()
						.then((res)=>{
							this.openid = res.data[0]._openid
						})
						
						this.show = true
						
						
						// this.wxlofin = true;
					})
					.catch(err => {
						console.log(err);
					});
			}
			
			
		}
	}
</script>

<style scoped>
	page {
		background-color: #F5F5F5;
	}

	.prefer-title {
		height: 40upx;
		font-size: 35upx;
		font-weight: bold;
		margin: 0 0 30upx 30upx;
		letter-spacing: 3upx;
	}
	.pos{
		padding: 25upx 30upx 10upx !important;
	}

	.prefer-content {
		background-color: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 25upx;
	}
	.content{
		display: flex;
		justify-content:flex-start;
		
		width: 100%;
		font-size: 30upx;
		padding: 10upx;
	}
	.detail{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.info{
		margin-left: 20upx;
		color: #B0B0B0;
	}
	.con{
		font-size: 31upx;
	}
	.out{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.del{
		margin-right: 150upx !important;
	}
	.time{
		font-size: 27upx;
		padding: 10upx;
	}
	.sp{
		justify-content: space-around;
	}
	.img{
		width: 30upx;
		height: 120upx;
	}
	.quan{
		width: 70upx;
		height: 70upx;
	}
	.app{
		display: flex;
		align-items: center;
	}
	.pic{
		width: 40upx;
		height: 40upx;
	}
	.po{
		margin-left: 150upx !important;
	}
	.audi{
		width: 150upx;
		height: 150upx;
		position: absolute;
		margin-right: -600upx;
	}
	.none {
		height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #B0B0B0;
	}
	.none text{
		margin-bottom: 40upx;
	}
	
	
	
	
	
	
	
	
	
	
	.content {
		display: flex;
		flex-direction: column;
	}
	.content-log {
		height: 400upx;
	}
	
	.logt1 {
		margin-top: 90upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.logt2 {
		margin-top: 10upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.log-t1 {
		font-size: 70upx;
		font-weight: bold;
		color: #f08e23;
		letter-spacing: 8upx;
	}
	.logt-t2 {
		font-size: 35rpx;
		font-weight: bold;
		color: #8e8e8e;
		letter-spacing: 30upx;
	}
	.content-title {
		width: 100%;
	}
	.title-t {
		margin: 0 auto;
		width: 70%;
		/* background-color: #9befff; */
		text-align: center;
	}
	.title-t text {
		font-size: 30upx;
		color: #8e8e8e;
		letter-spacing: 3upx;
	}
	.content-but {
		margin-top: 50upx;
		width: 100%;
	}
	.butt {
		width: 90%;
		margin: 0 auto;
		background-color: #f08e23;
		border: none;
		border-radius: 40upx;
	}
	.butt text {
		font-size: 34upx;
		letter-spacing: 10upx;
		color: #ffffff;
	}
	
	/* 发布委托列表 */
	.publish-v {
		margin: 40upx 30upx 0 30upx;
		width: 90%;
	}
	
	.publish-frame {
		border-radius: 20upx;
		padding-top: 12upx;
		height: 327upx;
		width: 100%;
		display: flex;
		/* justify-content: space-between; */
		justify-content: space-around;
		flex-wrap: wrap;
		background-color: #FFFFFF;
	}
	.publish-cata {
		width: 48%;
		height: 150upx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 15upx;
	}
	
	.publish-content {
		display: flex;
		flex-direction: column;
	}
	.publish-content text:nth-child(1) {
		padding-bottom: 7upx;
		font-size: 30upx;
		font-weight: bold;
		letter-spacing: 3upx;
	}
	.publish-content text:nth-child(2) {
		font-size: 25upx;
		color: #666666;
	}
	.publish-image {
		width: 90upx;
		height: 90upx;
	}
	.txt {
		margin-top: 40upx;
		font-size: 35upx;
		font-weight: bold;
		letter-spacing: 3upx;
	}
	.none {
		height: 100upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.none text {
		text-align: center;
		font-size: 25upx;
		color: #cccccc;
		margin: 0 auto;
	}
	
	.container{
		background-color: #F9F9F9;
		width: 103%;
		/* height: 1000upx; */
		border-radius: 20upx;
		margin-top: 10upx;
	}
	
	
	.entrustView{
		margin-top: 20upx;
		height: 190upx;
		/* background-color: #fafafa; */
		border-radius: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* border-bottom: 1px solid #e6e6e6; */
		
	}
	
	.en_title text {
		padding-bottom: 7upx;
		font-size: 30upx;
		font-weight: bold;
		letter-spacing: 3upx;
	}
	
	.en_title{
		margin-left: 30upx;
		padding-right: 20upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* flex-grow:2; */
	}
	.publish-image {
		width: 110upx;
		height: 110upx;
	}
	.tit{
		margin: 16upx 0 16upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		font-size: 25upx;
		/* flex-grow:3; */
		/* width: 50%; */
		
	/* 	white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; */
		
	}
	
	.titl{
		margin: 16upx 0 16upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		font-size: 25upx;
		margin-right: 30upx;
		/* flex-grow:2; */
	}
	.pl{
		 width: 160upx;
		        overflow:hidden;
		        text-overflow:ellipsis; 
	}
	.tit text{
		font-size: 28upx;
		letter-spacing: 2upx;
		color: #666666;
	}
	.titl text{
		font-size: 28upx;
		letter-spacing: 2upx;
		color: #666666;
	}
	.shadow{
		box-shadow:#F7F7F7 0px 0px 20px;
	}
	
	.pub-view {
		height: 110upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #e6e6e6 solid;
		margin-left: 60upx;
	}
	
	.pub-content {
		width: 74%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
</style>
